<template>
  <div class='page'>
    <div class='container'>
      <pub-search
        v-model:searchColumns='state.searchColumns'
        v-model:searchForm='state.searchForm'
        mask-append-to='table-container'
        @search='getPageData'
      >
        <template #leftBtn>
          <el-button
            :icon='Plus'
            class='btn-table-add'
            type='primary'
            @click="addNode('')"
          >
            新增
          </el-button>
        </template>
      </pub-search>
      <div class='node-container'>
        <pub-table
          ref='pubTable'
          :column='state.columns'
          :data='state.tableData'
          :loading='tableLoading'
        >
          <template #custom-processNodeIdFrom='scope'>
            <el-select
              v-model='scope.row.processNodeIdFrom'
              placeholder='请选择'
            >
              <el-option
                v-for='item in state.nodeData'
                :label='item.nodeName'
                :value='item.id'
                :key='item.id'
              ></el-option>
            </el-select>
          </template>
          <template #custom-button='scope'>
            <pub-dict-select
              v-model='scope.row.button'
              dict-code='SHANLX'
              placeholder='请选择'
            />
          </template>
          <template #custom-conditionText='scope'>
            <el-input
              v-model='scope.row.conditionText'
              placeholder='请输入'
            />
          </template>
          <template #custom-processNodeIdTo='scope'>
            <el-select
              v-model='scope.row.processNodeIdTo'
              clearable
              placeholder='请选择'
            >
              <el-option
                v-for='item in state.nodeData'
                :label='item.nodeName'
                :value='item.id'
                :key='item.id'
              ></el-option>
            </el-select>
          </template>
          <template #option='scope'>
            <el-button
              class='btn-row-add'
              plain
              type='primary'
              @click='delNode(scope.row)'
            >
              删除
            </el-button>
          </template>
        </pub-table>
      </div>
    </div>
    <div class='btn-group'>
      <el-button class='btn-form-close' @click='close()'>取消</el-button>
      <el-button
        class='btn-form-save'
        type='primary'
        :loading='btnLoading'
        v-prevent-repeat-click
        @click='saveCondition'
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
import { Sm4Dncrypt } from '@/utils/encryption.js'
import { getConditionList, updateCondition, getNodeList } from '@/api/process'
import { formatDictCode } from '../../../../utils/format'

const userStore = useUserStore()
const userAreaArr = userStore.userAreaArr
const orgInfo = userStore.orgInfo

const isEdit = ref(false)
const dialogFormVisible_add = ref(false)
const popTitle = ref('')
const tableLoading = ref(false)
const total = ref(0)
const btnLoading = ref(false)
const state = reactive({
  tableData: [],
  nodeData: [],
  searchForm: {},
  editId: null,
  columns: [
    { label: '开始节点', prop: 'processNodeIdFrom', type: 'custom-mul' },
    { label: '审核按钮', prop: 'button', type: 'custom-mul' },
    { label: '结束节点', prop: 'processNodeIdTo', type: 'custom-mul' },
    { label: '跳转条件', prop: 'conditionText', type: 'custom-mul' },
    { label: '操作', type: 'option', width: 140, fixed: 'right' }
  ]
})
const props = defineProps({
  processId: String
})

const emit = defineEmits(['close'])
const addNode = () => {
  state.tableData.push({
    isEdit: true,
    name: '',
    sort: '',
    processId: props.processId,
    viewType: ''
  })
}
const close = async () => {
  emit('close')
}
const saveCondition = async () => {
  btnLoading.value = true;
  state.tableData.forEach(v=>v.buttonName = formatDictCode('SHANLX', v.button))
  let res = await updateCondition(props.processId, state.tableData)
  btnLoading.value = false
  if (res.succeed) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    emit('close')
  }
}

const delNode = async (row) => {
  state.tableData.splice(row.index, 1)
}

const fetchList = () => {
  getPageData()
}

const getPageData = async () => {
  tableLoading.value = true
  let res = await getConditionList({
    processId: props.processId
  })
  if (res.succeed) {
    state.tableData = res.data
    total.value = res.total
  }
  tableLoading.value = false
}

const getNodeData = async () => {
  let res = await getNodeList({
    processId: props.processId
  })
  if (res.succeed) {
    state.nodeData = res.data
  }
}
onMounted(() => {
  getNodeData()
  getPageData()
})

</script>
<style scoped>
.node-container {
    height: calc(100% - 90px);
    flex: 1;
}
</style>
